1. Types of Component Relationships

1. Parent → Child ✅ (easy: use props)

2. Child → Parent ✅ (via function passed as prop)

3. Sibling → Sibling ⚠️ (via common parent)

4. Unrelated components 🧠 (use Context API, Redux, Zustand, etc.)

1. Parent to Child (Using Props)

// Parent.jsx
import Child from './Child';

function Parent() {
  const message = "Hello from Parent!";
  return <Child message={message} />;
}

  // Child.jsx
function Child({ message }) {
  return <p>{message}</p>;
}

2. Child to Parent (Using Callback/function Props)

// Parent.jsx
import Child from './Child';
import { useState } from 'react';

function Parent() {
  const [childData, setChildData] = useState('');

  const handleDataFromChild = (data) => {
    setChildData(data);
  };

  return (
    <div>
      <Child sendData={handleDataFromChild} />
      <p>Data from child: {childData}</p>
    </div>
  );
}

  // Child.jsx
function Child({ sendData }) {
  return (
    <button onClick={() => sendData('Hello Parent!')}>
      Send to Parent
    </button>
  );
}

3. Sibling to Sibling (via Parent)

// Parent.jsx
import Sibling1 from './Sibling1';
import Sibling2 from './Sibling2';
import { useState } from 'react';

function Parent() {
  const [data, setData] = useState('');

  return (
    <>
      <Sibling1 setData={setData} />
      <Sibling2 data={data} />
    </>
  );
}

// Sibling1.jsx
function Sibling1({ setData }) {
  return (
    <button onClick={() => setData("Hello from Sibling 1")}>
      Send Data to Sibling 2
    </button>
  );
}

// Sibling2.jsx
function Sibling2({ data }) {
  return <p>Received in Sibling 2: {data}</p>;
}